<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>🛒</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div id="app">
    <header><img src="./imgs/shooping-cart.png" alt=""></header>
    <main>
      <product-list :list="productData" @refresh="(list) => cartList = list "></product-list>
      <aside id="cart-list">
        <h2><img src="./imgs/cart.png" alt=""></h2>
        <table>
          <thead>
            <tr>
              <th class="item">
                <h5>商品</h5>
                <h6>Item</h6>
              </th>
              <th class="price">
                <h5>价格</h5>
                <h6>Price</h6>
              </th>
              <th class="quantity">
                <h5>数量</h5>
                <h6>Quantity</h6>
              </th>
              <th class="delete">
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in cartList" :key="item.id">
              <td class="item">
                <img :src="item.imgUrl" alt="">
                <p>{{item.title}}</p>
              </td>
              <td class="price">
                <p>¥{{item.price}}</p>
              </td>
              <td class="quantity">
                <input type="number" name="" id="">
              </td>
              <td class="delete">
                <button>X</button>
              </td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="4" class="total">Total <span>¥0</span></td>
            </tr>
            <tr>
              <td colspan="4"><button class="buy btn">购买</button></td>
            </tr>
          </tfoot>
        </table>
      </aside>
    </main>
    <footer><img src="./imgs/thanks.png" alt=""></footer>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="./cookie.js"></script>
  <script src="./index.js"></script>
</body>

</html>